<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<link rel="stylesheet" href="/MeituanPR/lib/reset.css" />
	<script type="text/javascript">
		<!--修改HTML根元素单位为rem-->
		(function () {
			var docEL = document.documentElement;
			function setRemUnit() {
				//获取rem基准值
				var rem = docEL.clientWidth/10;

				//动态设置HTML根元素的fontsize
				docEL.style.fontSize = rem + 'px';
			}
			setRemUnit();
			//窗口大小变化时触发
			window.addEventListener('resize',setRemUnit);

			//窗口出现在当前屏幕时(有浏览器兼容性)
			window.addEventListener('pageshow',function (e) {
				if (e.persisted){
					setRemUnit();
				}
			})
		})();
	</script>
	<style type="text/css">
		.header{
			background: yellow;
			width: 100%;
			height: 2.667rem;
			position: fixed;
			top: 0;
			/*避免被遮罩层覆盖*/
			z-index: 8;
		}
		.main{
			background-color: red;
			width: 100%;
			height: 24rem;
			padding-top: 2.667rem;
		}
		.bottom{
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 1.333rem;
			background-color: #21c56c;
			display: flex;
			flex-direction: row;
			/*设置子元素居中*/
			justify-content: center;
			align-items: center;
		}
		.bottom .btn{

			width: 1.333rem;
			height: 30px;
			font-size: 0.32rem;
			text-align: center;
			line-height: 0.8rem;
			border: 0.027rem solid #000;
			border-radius: 0.08rem;

		}
		.mask{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.5);
		}
		.close{
			display: none;
		}
	</style>
</head>
<body>
<div class="header"></div>
<div class="main">
	<div style="background-color: lightgrey;height: 12rem;">主体</div>
	<div style="background-color: orangered;height: 12rem;padding-bottom: 1.333rem">主体</div>
</div>
<div class="mask close"></div>
<div class="bottom">
	<div class="btn">开启遮罩</div>
</div>
<script type="text/javascript" src="/MeituanPR/lib/jquery.min.js"></script>
<script type="text/javascript">

	function addEvent() {
		$('.bottom').on('click','.btn',function () {
			$('.mask').toggle();
		})
	}
	addEvent();
</script>
</body>
</html>